<template>
  <div class="report-wrapper">
    <summary-table :data="tableData.summary" />
    <user-table v-if="!lodash.isEmpty(tableData.user)" :data="tableData.user" />
    <user-table v-if="!lodash.isEmpty(tableData.newUser)" order="3" :data="tableData.newUser" />
    <product-table v-if="!lodash.isEmpty(tableData.product)" :data="tableData.product" />
    <order-table v-if="!lodash.isEmpty(tableData.order)" :data="tableData.order" />
  </div>
</template>

<script>
import lodash from 'lodash';
import { Report } from '@/engine';
import SummaryTable from './SummaryTable';
import UserTable from './UserTable';
import ProductTable from './ProductTable';
import OrderTable from './OrderTable';

export default {
  name: 'PdfReport',
  components: {
    SummaryTable,
    UserTable,
    ProductTable,
    OrderTable,
  },
  data() {
    return {
      lodash,
      tableData: {},
    }
  },
  async created() {
    const reportId = this.$route.query?.reportId;
    const result = await Report.fetchReport(reportId);
    this.tableData = result;
  },
};
</script>

<style lang="scss" scoped>
.report-wrapper {
  color: #000;

  /deep/ .page {
    height: 1398px;
    width: 950px;
    padding-bottom: 40px;

    .title {
      margin-bottom: 20px;
      text-align: center;
      font-weight: 600;
      font-size: 20px;
    }

    .el-table {
      color: #000;
      font-size: 16px;

      thead {
        color: #000;

        th {
          font-weight: 600;
        }
      }

      th.el-table__cell.is-leaf {
        border-bottom: 2px solid #000;
      }

      .unit {
        font-weight: 400;
      }
    }

    .el-table--border {
      border-left: 2px solid #000;
      border-top: 2px solid #000;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
    }

    .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
      border-right: 1px solid #000;
    }

    .el-table td.el-table__cell {
      border-bottom: 1px solid #000;
    }

    .el-table--border th.el-table__cell, .el-table__fixed-right-patch {
      border-bottom: 1px solid #000;
    }

    .el-table thead.is-group th.el-table__cell {
      background-color: #fff;
    }

    .el-table--border::after, .el-table--group::after, .el-table::before {
      display: none;
    }
  }
}
</style>
